<template>
  <div class="idss-widget" :class="`is-${shadow}`" :style="globalStyle">
    <header :class="headerType ? `is-${headerType}` : ''" :style="headerStyle" v-if="isShowHeader">
      <div class="title" :class="item" v-for="(item, index) in titleSlots" :key="index">
        <idss-tooltip
          v-bind="$attrs[item]"
          :content="($attrs[item] && $attrs[item].content) ? $attrs[item].content : `${tooltipContent[item]}`"
          :over-width-display="true">
          <div class="title-tooltip" :ref="item">
            <slot :name="item"></slot>
          </div>
        </idss-tooltip>
      </div>
    </header>
    <main :style="mainStyle">
      <slot></slot>
    </main>
    <footer :style="footerStyle">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
// title类型
const titleSlotsTypes = ['title-left', 'title-center', 'title-right']
export default {
  name: 'idss-widget',
  props: {
    // 是否有阴影
    shadow: {
      type: String,
      default: 'always' // always: 一直有阴影；never: 不加阴影； hover: 鼠标移动上去显示阴影
    },
    /** 控制 header 渐变背景类型 */
    headerType: {
      type: String,
      default: '' // primary（渐变）、plain-border（透明背景有下边框）、header-float-right（tab 菜单 + 右边显示操作按钮）
    },
    /** 定义整个组件全局样式 */
    globalStyle: Object,
    /** 定义 Header 样式 */
    headerStyle: Object,
    /** 定义 Main 的样式 */
    mainStyle: Object,
    /** 定义 Footer 的样式 */
    footerStyle: Object

  },
  data () {
    return {
      // 缓存获取的 $slot
      titleSlots: [],
      tooltipContent: {
        'title-left': '',
        'title-center': '',
        'title-right': ''
      }
    }
  },
  computed: {
    // 判断 Header 显示/隐藏
    isShowHeader () {
      // 判断title slots是否存在
      return titleSlotsTypes.some(name => !!this.$slots[name])
    }
  },
  methods: {
    // 获取 title 模版
    getSlots () {
      this.titleSlots = titleSlotsTypes.filter(name => !!this.$slots[name])
    },
    // 获取 tooltip 提示内容
    getTooltipContent () {
      titleSlotsTypes.forEach(item => {
        this.tooltipContent[item] = this.$refs[item] && this.$refs[item].length ? this.$refs[item][0].innerText : ''
      })
    }
  },
  created () {
    this.getSlots()
  },
  mounted () {
    // Dom节点渲染完后获取title的内容
    this.getTooltipContent()
  }
}
</script>

<style scoped>
.idss-widget {
  background-color: #fff;
  border: none;
  /* margin: 0 10px 10px 0; */
  border-radius: 2px;}

  .idss-widget header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    line-height: 1.2;
    padding: 10px 15px;
    background: hsla(0,0%,100%,0);
  }

  .idss-widget .title {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    line-height: inherit;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


      .idss-widget .title-tooltip {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

    /* 剧中显示 */
    .idss-widget .title-center {
      margin: 0 auto;
      text-align: center;
    }

    /* 右侧显示 */
    .idss-widget .title-right {
      text-align: right;
    }

    /* 样式类型【可定义常用的几种】 */
    /* header： 背景设置为渐变色 */
     .idss-widget .is-primary {
      background: var(--widget-header-primary-bg);
      border-bottom: var(--widget-header-primary-border-bottom);
    }
    /* header： 透明背景 + 显示下边框 */
    .idss-widget .is-plain-border {
      background: var(--widget-header-plain-border-bg);
      border-bottom: var(--widget-header-plain-border-bottom);
    }
    /* header： tab 菜单 + 右边显示按钮 */
    .idss-widget .is-header-float-right {
      float: right;
      position: relative;
      z-index: 1;
      padding: 2px 10px 0 0;
    }
  .idss-widget main {
    padding: 0;
  }
  .idss-widgetfooter {
    text-align: center;
  }
/* shadow 样式处理 */
.is-always {
  box-shadow: 1px 2px 5px #cccccc;
}
.is-never {
  box-shadow: none;
}
.is-hover:hover {
  box-shadow: 1px 2px 5px #cccccc;
}
</style>
